<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="~{fragments/header :: header}">
</head>
<body>
<!-- Page Content -->
<div class="container my-4">

    <div class="row">

        <!-- 左侧栏目 -->
        <div class="col-md-4 col-xl-3">
            <div th:replace="~{userzone/fragments/userset :: userset}"></div>
        </div>
        <!-- 右侧栏目 -->

        <div class="col-md-8 col-xl-9">
            <!-- 个人设置 -->
            <div class="card">
                <h5 class="card-header"><i class="fa fa-cog" aria-hidden="true"></i> 信息设置</h5>
                <div class="card-body">
                    <!--method="post"  th:action="@{'/user/'+ ${#authentication.name}+'/updateProfile'}"-->
                    <form id="userForm">
                        <input type="hidden" name="id" id="id" th:value="${user.id}">
                        <div class="form-group ">
                            <label for="username" class="col-form-label">账号</label>
                            <input type="text" class="form-control" id="username" name="username"
                                   th:value="${user.username}" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <label for="nickname" class="col-form-label"><span class="text-danger">*</span>昵称</label>
                            <input type="text" class="form-control" id="nickname" name="nickname"
                                   th:value="${user.nickname}" minlength="2" maxlength="8"
                                   placeholder="请输入昵称，至少2个字符，至多8个">
                        </div>
                        <div class="form-group">
                            <label for="realname" class="col-form-label"><span class="text-danger">*</span>姓名</label>
                            <input type="text" class="form-control" id="realname" name="realname"
                                   th:value="${user.realname}" minlength="2" maxlength="20"
                                   placeholder="请输入姓名，至少2个字符，至多20个">
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-form-label"><span class="text-danger">*</span>邮箱</label>
                            <input type="email" class="form-control" id="email" name="email" th:value="${user.email}"
                                   maxlength="50" placeholder="请输入邮箱">
                        </div>
                        <div class="form-group">
                            <label for="phone" class="col-form-label">手机</label>
                            <input type="text" class="form-control" id="phone" name="phone" th:value="${user.phone}"
                                   minlength="6" maxlength="20" placeholder="请输入手机号，至少6个字符，至多20个">
                        </div>
                        <div class="form-group">
                            <label for="bio" class="col-form-label">个性签名</label>
                            <textarea placeholder="说点什么吧，至多100个字符哦" th:text="${user.bio}" maxlength="100"
                                      class="form-control" name="bio" id="bio">

							</textarea>
                        </div>
                        <div class="form-group">
                            <button type="button" id="update-profile-btn" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->

</div>
<!-- /.container -->
<!--编辑头像 弹出层-->
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog"
     aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalLabel">编辑头像</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="avatarFormContainer">
            <!--头像-->
                <style>
                    .cropImg {
                        position: relative;
                        width: 100%;
                        height: 300px;
                        background-color: #ccc;
                        color: #fff;
                        line-height: 300px;
                        text-align: center;
                        border: 1px dashed rgba(0, 0, 0, .4);
                    }

                    .cropImg > img {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        -webkit-transform: translate3d(-50%, -50%, 0);
                        -moz-transform: translate3d(-50%, -50%, 0);
                        -ms-transform: translate3d(-50%, -50%, 0);
                        -o-transform: translate3d(-50%, -50%, 0);
                        transform: translate3d(-50%, -50%, 0);
                    }
                </style>


                <div id="cropImg" class="cropImg">
                    <span>图片剪切</span>
                    <img src="">
                </div>
                <div class="crop" id="crop">
                    <input type="file" accept="image/*" class="crop-input">
                    <div class="crop-mask"></div>
                    <div class="crop-wrap">
                        <div class="crop-wrap-content">
                            <div class="crop-wrap-thum"></div>
                            <div class="crop-wrap-spinner">Loading...</div>
                        </div>
                        <div class="crop-wrap-group">
                            <a href="javascript:;" class="croped">剪切</a>
                        </div>
                        <div class="crop-wrap-group">
                            <a href="javascript:;" class="zoomIn">放大</a>
                            <a href="javascript:;" class="zoomOut">缩小</a>
                        </div>

                    </div>
                </div>
                <form  enctype="multipart/form-data"  id="avatarformid"  >
                </form>

            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" th:attr="avatarUsername=${user.username}"   id="submitEditAvatar">提交</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div th:replace="~{fragments/footer :: footer}">...</div>
<script th:src="@{/js/userzone/profile.js}"></script>
<script th:inline="javascript">
    // 获取 CSRF Token
    var csrfToken = $("meta[name='_csrf']").attr("content");
    var csrfHeader = $("meta[name='_csrf_header']").attr("content");

    var loginUsername = [[${#authentication.name}]];
    var updateUrl = "/user/" + loginUsername + "/updateProfile";
    //更新用户信息
    $("#update-profile-btn").click(function () {
        //check
        var realname = $("#realname").val().trim();
        if (realname.length < 2 || realname.length > 20) {
            toastr.error('姓名格式不正确', '错误提示');
            $("#realname").focus();
            return false;
        }
        var nickname = $("#nickname").val().trim();
        if (nickname.length < 2 || nickname.length > 8) {
            toastr.error('昵称格式不正确', '错误提示');
            $("#nickname").focus();
            return false;
        }
        var email = $("#email").val().trim();
        var reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
        if (!reg.test(email)) {
            toastr.error('邮箱格式不正确', '错误提示');
            $("#email").focus();
            return false;
        }
        var phone = $("#phone").val().trim();
        if(phone.length > 0){
            if (phone.length < 6 || phone.length > 20) {
                toastr.error('手机格式不正确', '错误提示');
                $("#phone").focus();
                return false;
            }
        }
        $.ajax({
            url: updateUrl,
            type: 'POST',
            data: $("#userForm").serialize(),
            beforeSend: function (request) {
                request.setRequestHeader(csrfHeader, csrfToken); // 添加  CSRF Token
            },
            success: function (data) {
                if (data.status == 200) {
                    toastr.success(data.message);
                } else {
                    toastr.error(data.message);
                }
            },
            error: function () {
                toastr.error("error!");
            }
        });
    });

    <!--上传头像-->
    var crop = document.querySelector('#cropImg');
    var cropNote = crop.querySelector('span');
    var cropImg = crop.querySelector('img');

    var cropper = new Cropper({
        el: '#crop',
        cp: '#cropImg',
        callback: function (dataURL, dataBlob) {
            cropNote.style.display = 'none';
            cropImg.style.display = 'block';
            cropImg.src = dataURL;
        }
    });

</script>

</body>
</html>